<template>
    <!-- 发货按钮 -->
    <el-button type="primary" @click="showAddDialog()">发货</el-button>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="titleId" label="订单编号" width="180" />
        <el-table-column prop="data" label="购买时间" />
        <el-table-column prop="name" label="购买人" />
        <el-table-column prop="zongprice" label="订单总价" />
        <el-table-column prop="scope" label="订单状态">
            <template #default="scope">
                <el-tag v-if="scope.row.scope === '代付款'" type="danger">代付款</el-tag>
                <el-tag v-if="scope.row.scope === '待发货'" type="warning">待发货</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
            <template #default="scope">
                <el-button type="primary" @click="viewDetail(scope.row)">修改</el-button>
                <el-button type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <FahuoProduct   ref="skuDialogRef" />
    <DingProduct ref="detailDialogRef"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'
import FahuoProduct from '../../components/FahuoProduct.vue'
import DingProduct from '../../components/DingProduct.vue';
const detailDialogRef = ref()
const skuDialogRef = ref();
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const tableData = [
    {
        id: '1795',
        titleId: 'gm2025092715345735751',
        data: '2025-09-27 15:09:57',
        name: "梁",
        zongprice: "17",
        scope: "待发货"
    },
    {
        id: "1794",
        titleId: '8m2025092608441965699',
        data: '2025-09-26 08:09:19',
        name: "梁",
        zongprice: "159",
        scope: "代付款"
    },
    {
        id: "1793",
        titleId: 'gm2025091719534015774',
        data: '2025-09-17 19:09:40',
        name: "赵先生",
        zongprice: "16",
        scope: "待发货"
    },
    {
        id: "1792",
        titleId: '8m2025091716221225301',
        data: '2025-09-17 16:09:12',
        name: "赵先生",
        zongprice: "159",
        scope: "代付款"
    },
    {
        id: "1791",
        titleId: 'Em2025091609345019753',
        data: '2025-09-16 09:09:50',
        name: "大漂亮",
        zongprice: "17",
        scope: "待发货"
    },
]

const showAddDialog = () => {
  if (skuDialogRef.value) {
    skuDialogRef.value.showFormDialog();
  }
};
// 查看详情方法
const viewDetail = (row: any) => {
  if (detailDialogRef.value) {
    detailDialogRef.value.showDetail(row)
  }
}

</script>
